<template>

  <splitpanes @resize="paneSize = $event[0].size"  class="default-theme">
    <pane  size="20" :style="{'height': h}">
      <a-layout has-sider>
        <menu-side :pane-size="paneSize"/>
      </a-layout>
    </pane>
    <pane :style="{'height': h}">
      <md-editor></md-editor>
    </pane>
  </splitpanes>
</template>

<script lang="ts">
import MenuSide from "./MenuSide.vue"
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css';
import MdEditor from "./MdEditor.vue";
export default {
  name: "SplitPanes",
  components: {
    Splitpanes, Pane, MenuSide,MdEditor
  },
  props:{
    paneSize:Number
  },
  data() {
    return {
      h: '100%'
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.h = '100%';
    });
  }


}
</script>

<style scoped>
.splitpanes__pane {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  /*font-family: Helvetica, Arial, sans-serif;*/
  color: rgb(114, 27, 27);
  /*font-size: 5em;*/
}
</style>